<template>
  <div class="app">
    <el-header>
      <div style="display: flex; align-items: center;">
        <span style="margin-left: 10px;">
          <i class="el-icon-arrow-left"></i>服务门店
        </span>
      </div>
      <div @click="aaaa()">-</div>
    </el-header>
    <div style="display: flex; align-items: center;">
      <div style="display: flex; align-items: center; margin-right: 20px;" class="container">
        <span style="margin-left: 25px;"> <i class="el-icon-goods"></i>粤B-546665</span>
      </div>
      <div style="display: flex; align-items: center;">
        <span style="margin-left: 120px;" @click="mendianditu()"><i class="el-icon-location"></i>深圳市宝安</span>
        <el-dropdown>
          <i class="el-icon-arrow-down el-dropdown-link"></i>
        </el-dropdown>
      </div>

    </div>
    <el-form :inline="true" :model="formm" class="sousuo" >
      <el-input v-model="formm.mdname" placeholder="🔍  请输入门店名称" clearable></el-input>
    </el-form>
    <div class="service-list">
      <van-tabs v-model="active1">
        <van-tab title="综合排序" >
          <div class="kuang1" >
            <van-cell-group v-for="item in vehicles1" >
              <van-card
                  :tag="item.cishu==0?'':item.cishu==1?'去过':'常去'"
                  :title="item.mdname"
                  :thumb="item.img"
                  @click="details(item.mid)"
              >
                <template #tags>
                  <van-tag plain type="info" class="no-border">
                    <span class="x1">{{item.xingji }}</span>
                  </van-tag>
                  <van-tag plain type="danger">
                    <span>{{item.xingjishu }}.0&nbsp;&nbsp;&nbsp;</span>
                  </van-tag>
                  <van-tag plain type="danger">
                    <span>&nbsp;&nbsp;&nbsp;{{item.danshu }}&nbsp;单</span>
                  </van-tag>
                </template></van-card>
            </van-cell-group>
          </div>
        </van-tab>
        <van-tab title="距离排序">
          <div class="kuang1" >
            <van-cell-group v-for="item in vehicles2" >
              <van-card
                  :tag="item.cishu==0?'':item.cishu==1?'去过':'常去'"
                  :title="item.mdname"
                  :thumb="item.img"
                  @click="details(item.mid)"
              >
                <template #tags>
                  <van-tag plain type="info" class="no-border">
                    <span class="x1">{{item.xingji }}</span>
                  </van-tag>
                  <van-tag plain type="danger">
                    <span>{{item.xingjishu }}.0&nbsp;&nbsp;&nbsp;</span>
                  </van-tag>
                  <van-tag plain type="danger">
                    <span>&nbsp;&nbsp;&nbsp;{{item.danshu }}&nbsp;单</span>
                  </van-tag>
                </template></van-card>
            </van-cell-group>
          </div></van-tab>
        <van-tab title="筛选"  >
          <van-dropdown-menu>
            <van-dropdown-item v-model="value2" @change="aaa" :options="option2" title="选择筛选内容"/>
          </van-dropdown-menu>
          <div class="kuang1" >
            <van-cell-group v-for="item in vehicles" >
              <van-card
                  :tag="item.cishu==0?'':item.cishu==1?'去过':'常去'"
                  :title="item.mdname"
                  :thumb="item.img"
                  @click="details(item.mid)"
              >
                <template #tags>
                  <van-tag plain type="info" class="no-border" >
                    <span class="x1">{{item.xingji }}</span>
                  </van-tag>
                  <van-tag plain type="primary">
                    <span>{{item.xingjishu }}.0&nbsp;&nbsp;&nbsp;</span>
                  </van-tag>
                  <van-tag plain type="primary">
                    <span>&nbsp;&nbsp;&nbsp;{{item.danshu }}&nbsp;单</span>
                  </van-tag>
                </template></van-card>
            </van-cell-group>
          </div>
        </van-tab>
      </van-tabs>
    </div>
<!--    <van-tabbar v-model="active">-->
<!--      <van-tabbar-item icon="home-o" @click="shouye()">首页</van-tabbar-item>-->
<!--      <van-tabbar-item icon="apps-o" @click="fenlei()">分类</van-tabbar-item>-->
<!--      <van-tabbar-item icon="shop-o" @click="">门店</van-tabbar-item>-->
<!--      <van-tabbar-item icon="contact-o" @click="wode()">我的</van-tabbar-item>-->
<!--    </van-tabbar>-->
  </div>
</template>

<script>

export default {
  data() {
    return {
      active1: 0,
      active: 2,
      vehicles: [],
      vehicles1: [],
      vehicles2: [],
      formm:{
        mdname:'',
      },
      value2: 0,
      option2: [
        { text: '未去', value: 1},
        { text: '去过', value: 3 },
        { text: '常去', value: 2 },

      ],
    }
  },
  watch:{
    formm:{
      deep:true,
      handler(){
        this.findMendianAll();
        this.zonghe();
        this.juli();

      }
    }
  },
  methods: {
    aaa(val){
      this.value2 = val
      this.fetchBackendData()
    },
    fetchBackendData() {
      this.axios.post(`http://1.94.221.254:9999/api-qcfw-mendian/mendian/fetchBackendData?value2=${this.value2}`).then(res => {
        this.vehicles = res.data
        console.log(this.vehicles)
      })
    },
    findMendianAll(){
      this.axios.post(`http://1.94.221.254:9999/api-qcfw-mendian/mendian/findMendianAll?`,this.formm).then(res => {
        // console.log(res.data)
        this.vehicles = res.data
      })
    },
    zonghe(){
      this.axios.post('http://1.94.221.254:9999/api-qcfw-mendian/mendian/zonghe',this.formm).then(res => {
        console.log(res.data)
        this.vehicles1 = res.data
        console.log(this.vehicles)
      })
    },
    juli(){
      this.axios.post('http://1.94.221.254:9999/api-qcfw-mendian/mendian/juli',this.formm).then(res => {
        console.log(res.data)
        this.vehicles2 = res.data
        console.log(this.vehicles)
      })
    },
    details(mid){
      this.$router.push({path: '/mendianxq', query: {mid: mid}})
    },

    // shouye() {
    //   this.$router.push('/shouye')
    // },
    // fenlei() {
    //   this.$router.push('/fenlei')
    // },
    // wode() {
    //   this.$router.push('/wode')
    // },
    mendianditu(){
      // location.href=`https://lbs.amap.com/demo/javascript-api-v2/example/location/browser-location`
      this.$router.push('/mendianditu')
    },
    aaaa(){
      this.$router.push('/map')
    }
  },
  created() {
    this.findMendianAll();
    this.zonghe();
    this.juli();
    var token = localStorage.getItem('token');
    if (token === null) {
      this.$router.push('/');
    }
  }
};
</script>

<style>


.sousuo {
  margin-top: 10px;
}
.service-list {
  padding: 10px;
}
span {
  display: inline-block;
  float: left
}
li {}
img {
  width: 90px;
  height: 100px;
  margin-bottom: 30px;
  padding-left: 0;
}
.x1{
  font-size: 7px;


}

</style>
